<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
	<meta name="viewport" content="width=1024" /><!--移动端相关属性-->
    <title>海洋的前世今生公选课（部分效果演示）</title>
    <meta name="description" content="描述" />
    <meta name="author" content="作者" />
    <link href="css/impress-demo.css" rel="stylesheet" /><!--引入CSS文件-->
</head>

<style>
	
	@keyframes move {
			0% {
				transform: translate(-40vw,35vh)	 
			}	
			100% {
				transform: translate(10vw,35vh) 
			}
			
		}
		@keyframes qmove{
			0% {
				transform: translate(-40vw,50vh)	 
			}	
			100% {
				transform: translate(20vw,50vh) 
			}
			
		}
	.m{
			font-size: 60px;
			animation-name: move;
			animation-duration: 1s;
			animation-fill-mode: forwards;
		}
		.k{
			font-size: 30px;
			animation-name: qmove;
			animation-duration: 1.5s;
			animation-fill-mode: forwards;
		}
	</style>

<body class="impress-not-supported">

    <div class="fallback-message"><!--不兼容时显示提示的div要引入类名："impress-not-supported"-->
        <p>浏览器不支持impress.js的提示文字</p>
    </div>

    <div id="impress" data-autoplay="700">
		

        <div id="bored" class="step slide" data-x="-1000" data-y="-1500" >
            <p class="m">海 洋 的 前 世 今 生</p>
			  <p class="k">线上PPT效果演示</p>
        </div>

        <div class="step slide" data-x="0" data-y="-1500" >
            <q><br><br>在昆明鱼之前，生物还没有进化出脊椎，它们的痕迹不易保留，而且由于时间过长，发现的证据极少，因此不对其进行讨论。</q>
        </div>

        <div class="step slide" data-x="1000" data-y="-1500" >
            <q>昆明鱼——鱼类到人类进化的起点<br>
			5.3亿年前出现，它是最早的脊椎动物和原始的无颌鱼类,虽然这种动物毫不起眼，但它的出现正式迈入了脊椎动物的新阶段，此后，从鱼类到两栖类，从两栖类到爬行类，再到哺乳类，而哺乳类的顶端就是人类，人类就是这样从鱼类进化而来的。</q>
        </div>
  <div class="step slide" data-x="2000" data-y="-1500" >
            <q>盾皮鱼——颔骨开始形成<br>
	  		生活在志留纪到泥盆纪，原始有颌鱼类，身披骨甲，是鱼类中内容比较庞杂的一大类群，已具有上、下颌及较发达的偶鳍。有颔类的出现使得动物得以咀嚼，提高了消化能力，促进了腹肌等肌群的形成，为生物离开海洋提供了基础。</q>
        </div>
		 <div class="step slide" data-x="3000" data-y="-1500" >
            <q>海纳螈——第一个爬上陆地的脊椎动物<br>
				人类的祖先之一，大约生活在3.6亿年前的泥盆纪晚期，是原始的两栖动物，它们非常适合在水中生活，身体呈现流线型，长长的尾巴，快速摆动，游动速度非常快。为了适应陆地的生活，海纳螈进化出了可以在陆地呼吸的肺和辅助呼吸的皮肤。在陆地上移动缓慢，动作笨拙,停留时间也很短。

</q>
        </div>
		<div class="step slide" data-x="4000" data-y="-1500" >
            <q><br>拉哥岩龙——爬行动物时期<br><br>
			人类的祖先之一，由两栖动物进化而来的爬行动物，身长40厘米。和两栖动物不同爬行动物已经完全适应了陆地生活，进化了肺。
			</q>
        </div>
		<div class="step slide" data-x="5000" data-y="-1500">
            <q>犬齿兽——最早的哺乳动物时期<br><br>
				哺乳动物的祖先。更像哺乳动物而不是爬行动物。有些成对地居住在洞穴中。远古生物，曾在亚利桑那石化森林仅发现过两枚大型犬齿兽的臼齿。大多数犬齿兽是肉食性动物，极少数可超过90厘米长。

</q>
        </div>
		<div class="step slide" data-x="6000" data-y="-1500">
            <q><br>森林古猿——开始使用两腿行走<br><br>
				约生活于1200多万年前。体长约60厘米体型像黑猩猩，它可以四足行走，也可以两足行走，爬树、吃果实。		
</q>
        </div>
		<div class="step slide" data-x="7000" data-y="-1500">
            <q>南方古猿——尾巴消失<br><br>
			人科动物的一个已灭绝的属。被认为是从猿到人转变的第一阶段。约生活在800万年前，是人类和黑猩猩的祖先，身高约高1.2-1.3米，体重在15至20公斤之间，能够初步用两足直立行走。

</q>
        </div>
			<div class="step slide" data-x="8000" data-y="-1500">
            <q>能人——人类和猿之间的过度种

<br>
			比南方古猿进步但比直立人原始的古人类落后。是所知最早能制造石器工具的人类祖先。生活在距今约200万～175万年前的东非和南非，考古时代相当于旧石器时代早期。一般认为能人后来可能进化成直立人。
</q>
        </div>
		<div class="step slide" data-x="9000" data-y="-1500">
            <q>直立人——具备了人的特征<br>
<br>
			距今180万~30万年前生活在非洲、欧洲和亚洲的古人类。他们已经具备了人的特征：能制造工具，能直立行走，但脑容量较少（1000毫升），头部还保留了较多的原始性质。

</q>
        </div>
				
			
		<div class="step slide" data-x="10000" data-y="-1500">
            <q>智人——人属下的唯一现存物种
<br>
			主要特征是脑容量大，在1300毫升以上；眉嵴发达，前额较倾斜，枕部突出，鼻部宽扁，颌部前突。晚期智人（新人）是解剖结构上的现代人。晚期智人（新人）大约从距今四五万年前开始出现。两者形态上的主要差别在于前部牙齿和面部减小，眉嵴减弱，颅高增大，到现代人则更加明显。


</q>
        </div>
	     
		
			
		<div class="step s s2" data-x="1000" data-y="-500" data-scale="1" data-autoplay="2" data-rotate-x="-20" >		
		<div class="sf js1">

		<pre> </pre>    
		<center><p class="f"><font color="#000000"><strong>昆&nbsp;&nbsp;&nbsp;明&nbsp;&nbsp;&nbsp;鱼</strong></font> </p></center>
		
		
        		</div>
		</div>


		<div class="step s s2"  data-x="1000" data-y="50" data-scale="1" data-autoplay="3" data-rotate-x="-45" > 				
        		<div class="sq js1">
		<p class="f">  </p> <pre> </pre>    
		<center><img src="1.png" width="700px"  height="500"> <center/>
        		</div>
        		</div>
			
			<div class="step s s2" data-x="2000" data-y="-500" data-scale="1" data-autoplay="2" data-rotate-x="-20" >		
		<div class="sf js1">

		<pre> </pre>    
		<center><p class="f"><font color="#000000"><strong>盾&nbsp;&nbsp;&nbsp;皮&nbsp;&nbsp;&nbsp;鱼  </strong></font> </p></center>
		
		
        		</div>
		</div>


		<div class="step s s2"  data-x="2000" data-y="50" data-scale="1" data-autoplay="3" data-rotate-x="-45"> 				
        		<div class="sq js1">
		<p class="f">  </p> <pre> </pre>    
		<center><img src="2.jpg" width="700px"  height="500"> <center/>
        		</div>
        		</div>
	<div class="step s s2" data-x="3000" data-y="-500" data-scale="1" data-autoplay="2" data-rotate-x="-20">		
		<div class="sf js1">

		<pre> </pre>    
		<center><p class="f"><font color="#000000"><strong>海&nbsp;&nbsp;&nbsp;纳&nbsp;&nbsp;&nbsp;螈 </strong></font> </p></center>
		
		
        		</div>
		</div>


		<div class="step s s2"  data-x="3000" data-y="50" data-scale="1" data-autoplay="3" data-rotate-x="-45"> 				
        		<div class="sq js1">
		<p class="f">  </p> <pre> </pre>    
		<center><img src="3.png" width="700px"  height="500"> <center/>
        		</div>
        		</div>
	<div class="step s s2" data-x="4000" data-y="-500" data-scale="1" data-autoplay="2" data-rotate-x="-20">		
		<div class="sf js1">

		<pre> </pre>    
		<center><p class="f"><font color="#000000"><strong>安&nbsp;&nbsp;哥&nbsp;&nbsp;拉&nbsp;&nbsp;龙</strong></font> </p></center>
		
		
        		</div>
		</div>


		<div class="step s s2"  data-x="4000" data-y="50" data-scale="1" data-autoplay="3" data-rotate-x="-45"> 				
        		<div class="sq js1">
		<p class="f">  </p> <pre> </pre>    
		<center><img src="4.png" width="700px"  height="500"> <center/>
        		</div>
        		</div>
<div class="step s s2" data-x="5000" data-y="-500" data-scale="1" data-autoplay="2" data-rotate-x="-20" >		
		<div class="sf js1">

		<pre> </pre>    
		<center><p class="f"><font color="#000000"><strong>始&nbsp;&nbsp;&nbsp;祖&nbsp;&nbsp;&nbsp;兽</strong></font> </p></center>
		
		
        		</div>
		</div>


		<div class="step s s2"  data-x="5000" data-y="50" data-scale="1" data-autoplay="3" data-rotate-x="-45"> 				
        		<div class="sq js1">
		<p class="f">  </p> <pre> </pre>    
		<center><img src="5.png" width="700px"  height="500"> <center/>
        		</div>
        		</div>
       
<div class="step s s2" data-x="6000" data-y="-500" data-scale="1" data-autoplay="2" data-rotate-x="-20" >		
		<div class="sf js1">

		<pre> </pre>    
		<center><p class="f"><font color="#000000"><strong>森&nbsp;&nbsp;林&nbsp;&nbsp;古&nbsp;&nbsp;猿</strong></font> </p></center>
		
		
        		</div>
		</div>


		<div class="step s s2"  data-x="6000" data-y="50" data-scale="1" data-autoplay="3" data-rotate-x="-45"> 				
        		<div class="sq js1">
		<p class="f">  </p> <pre> </pre>    
		<center><img src="6.png" width="700px"  height="500"> <center/>
        		</div>
        		</div>
       
	<div class="step s s2" data-x="7000" data-y="-500" data-scale="1" data-autoplay="2" data-rotate-x="-20" >		
		<div class="sf js1">

		<pre> </pre>    
		<center><p class="f"><font color="#000000"><strong>南&nbsp;&nbsp;方&nbsp;&nbsp;古&nbsp;&nbsp;猿</strong></font> </p></center>
		
		
        		</div>
		</div>


		<div class="step s s2"  data-x="7000" data-y="50" data-scale="1" data-autoplay="3" data-rotate-x="-45"> 				
        		<div class="sq js1">
		<p class="f">  </p> <pre> </pre>    
		<center><img src="7.png" width="700px"  height="500"> <center/>
        		</div>
        		</div>
	
        <div id="overview" class="step" data-x="4500" data-y="-350" data-z="0" data-scale="7.5"></div><!--全局视窗-->

    </div>

    <div id="impress-toolbar"></div><!--控制条，id为："impress-toolbar"-->

    <script src="js/impress.js"></script><!--引入impress.js文件-->
    <script>impress().init();</script><!--初始化-->

</body>
</html>
